<template>
  <div>
    <div>
    <div class="menuP" align="left">订单列表
        <el-button type="primary" size="small" @click="goUploadImages">批量订单截图OCR识别</el-button>
        <el-button type="primary" size="small" @click="goinsertShoesInfoByManual">手工添加订单信息</el-button>
        <el-button type="primary" size="small" @click="getShoesInfoListByCriteria">刷新</el-button>
        <el-button type="primary" size="small" @click="productIdManage">货号管理</el-button>（新增订单的名称会自动写入货号管理，需手工维护货号）| 导出注意：（请先输入条件点查询后，再点击导出excel）
    </div>
    <div class="selectP" align="right">
      <router-link :to="{ path: '/hasUploadImageList' }">去查询已上传图片-----</router-link>
      查询栏：<el-input size="small" style="width: 320px" v-model="selectForm.shoeName" placeholder="请输入商品名称"></el-input>
      <el-input size="small" style="width: 150px" v-model="selectForm.productId" placeholder="请输入货号"></el-input>
      <el-select size="small" style="width: 100px" v-model="selectForm.buyChannel" placeholder="购买平台">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker style="width: 230px;height: 32px;top: 4px"
                      v-model="selectForm.orderDate"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      @change="dateChange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" size="small" icon="el-icon-search" @click="getShoesInfoListByCriteria">查询</el-button>
      <el-button type="primary" size="small" icon="el-icon-search" @click="resetSelectCriteria">重置</el-button>
      <el-button type="primary" size="small" @click="exportExcelByCriteria">导出Excel表</el-button>
    </div>
    </div>
    <el-table
      :data="shoes"
      class="tableBox"
      style="width: 100%"
      height="550"
      :row-style="{height:'46px'}"
      :cell-style="{padding:'0px'}">
      <el-table-column
        prop="id"
        label="订单id">
      </el-table-column>
      <el-table-column
        prop="productId"
        label="货号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="shoeName"
        label="商品名称"
        width="280">
      </el-table-column>
      <el-table-column
        prop="shoeSize"
        label="尺码">
      </el-table-column>
      <el-table-column
        prop="shoeNumber"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="expressMoney"
        label="运费">
      </el-table-column>
      <el-table-column
        prop="noexpressMoney"
        label="运费券">
      </el-table-column>
      <el-table-column
        prop="couponMoney"
        label="优惠券">
      </el-table-column>
      <el-table-column
        prop="subsidyMoney"
        label="平台补贴">
      </el-table-column>
      <el-table-column
        prop="totalMoney"
        label="实际支付">
      </el-table-column>
      <el-table-column
        prop="orderDate"
        label="采购日期"
        width="100">
      </el-table-column>
      <el-table-column
        prop="buyChannel"
        label="采购平台">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button type="text" @click="updateShoesForm(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteShoesForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-left: 1000px">
      当前查询条件下合计实付金额：{{allTotalMoney}} 元
    </div>
<!--    翻页的组件，并显示总个数-->
    <div>
      <el-pagination
        background
        layout="total,sizes,prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :page-sizes="[10,20,50]"
        :page-size="10"
        :total="allShoesNumber">
      </el-pagination>
    </div>

    <div>
<!--      手工添加商品信息的弹窗-->
      <el-dialog title="请填写订单信息" :visible.sync="insertShoesFormVisible">
        <el-form align="left" size="small" :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input style="width: 490px;margin-right: 160px" v-model="inserForm.shoeName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form align="left" size="small" inline="ture" :model="form">
          <el-form-item label="订单id" :label-width="formLabelWidth">
            <el-input v-model="this.id" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="货号" :label-width="formLabelWidth">
            <el-input v-model="inserForm.productId" :disabled="true" placeholder="建议匹配鞋名自动添加" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="尺码" :label-width="formLabelWidth">
            <el-input style="" v-model="inserForm.shoeSize" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" :label-width="formLabelWidth">
            <el-input v-model="inserForm.shoeNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单价" :label-width="formLabelWidth">
            <el-input v-model="inserForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运费" :label-width="formLabelWidth">
            <el-input v-model="inserForm.expressMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运费券" :label-width="formLabelWidth">
            <el-input v-model="inserForm.noexpressMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="优惠券" :label-width="formLabelWidth">
            <el-input v-model="inserForm.couponMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="平台补贴" :label-width="formLabelWidth">
            <el-input v-model="inserForm.subsidyMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="实际支付" :label-width="formLabelWidth">
            <el-input v-model="inserForm.totalMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购日期" :label-width="formLabelWidth">
            <el-input v-model="inserForm.orderDate" placeholder="格式要求：2022-03-08"autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购平台" :label-width="formLabelWidth">
            <el-input v-model="inserForm.buyChannel" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="insertShoesFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertShoesByManual">确 定</el-button>
          <el-button @click="resetForm">重 置</el-button>
        </div>
      </el-dialog>
<!--      删除的弹窗-->
      <el-dialog title="提示" :visible.sync="deleteShoesFormVisible" width="30%" :before-close="handleClose">
        <span>确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="deleteShoesFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteShoesById">确 定</el-button>
      </span>
      </el-dialog>
<!--上传图片的弹窗-->
      <el-dialog title="请选择上传图片" :visible.sync="uploadImageVisible">
        <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :list-type="picture"
          :multiple="true"
          :limit="10"
          :on-change="handleChange"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">点击上传识别</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png格式的图片，图片大小1M以内</div>
        </el-upload>
      </el-dialog>
<!--      货号管理的弹窗-->
      <el-dialog title="货号管理列表" :visible.sync="productManageFormVisible">
        <div style="height: 460px;overflow: auto">
          <ProductIdManage></ProductIdManage>
        </div>
      </el-dialog>
<!--修改信息的弹窗-->
      <el-dialog title="请编辑订单信息" :visible.sync="updateShoesFormVisible">
        <el-form style="margin-left: 60px" size="small" :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input style="width: 490px;margin-right: 160px" v-model="form.shoeName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form size="small" inline="ture" :model="form">
          <el-form-item label="订单id" :label-width="formLabelWidth">
            <el-input v-model="this.id" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="货号" :label-width="formLabelWidth">
            <el-input v-model="form.productId" :disabled="true" placeholder="建议匹配鞋名自动添加" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="尺码" :label-width="formLabelWidth">
            <el-input style="" v-model="form.shoeSize" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" :label-width="formLabelWidth">
            <el-input v-model="form.shoeNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单价" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运费" :label-width="formLabelWidth">
            <el-input v-model="form.expressMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运费券" :label-width="formLabelWidth">
            <el-input v-model="form.noexpressMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="优惠券" :label-width="formLabelWidth">
            <el-input v-model="form.couponMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="平台补贴" :label-width="formLabelWidth">
            <el-input v-model="form.subsidyMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="实际支付" :label-width="formLabelWidth">
            <el-input v-model="form.totalMoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购日期" :label-width="formLabelWidth">
            <el-input v-model="form.orderDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购日期" :label-width="formLabelWidth">
            <el-input v-model="form.buyChannel" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateShoesFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateShoesById">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>


</template>

<script>
import ProductIdManage from "./ProductIdManage";
export default {
  name: "ShoesList",
  components: {ProductIdManage},
  data() {
    return {
      id: '',
      shoes: "",
      pageNum: "1",
      allShoesNumber: "",
      allTotalMoney: "",
      filename: "orderInfoTable",
      options: [{
        value: '得物',
      }, {
        value: 'nice',
      }],
      value: "",
      selectForm: {
        orderDate: "",
        buyChannel: "",
        orderStartTime: "",
        orderEndTime: "",
        productId: "",
        shoeName: "",
        pageSize: "10",
      },
      uploadImageVisible: false,
      fileList: [],
      insertShoesFormVisible: false,
      updateShoesFormVisible: false,
      deleteShoesFormVisible: false,
      productManageFormVisible: false,
      form: {
        productId: "",
        shoeName: "",
        shoeSize: "",
        shoeNumber: "",
        price: "",
        expressMoney: "",
        noexpressMoney: "",
        couponMoney: "",
        subsidyMoney: "",
        totalMoney: "",
        orderDate: "",
        buyChannel: "",
      },
      inserForm: {
        productId: "",
        shoeName: "",
        shoeSize: "",
        shoeNumber: "",
        price: "",
        expressMoney: "",
        noexpressMoney: "",
        couponMoney: "",
        subsidyMoney: "",
        totalMoney: "",
        orderDate: "",
        buyChannel: "",
      },
      formLabelWidth: '100px',
    }
  },
  mounted() {
    this.getShoesInfoListByCriteria()
  },
  methods: {
    //当日期有选择变动的时候，获取start和endTime
    dateChange(val){
      this.selectForm.orderStartTime=val.toString().split(",")[0];
      this.selectForm.orderEndTime=val.toString().split(",")[1];
    },
    //当平台选择有变动的时候
    getBuyChannel(val){
      this.selectForm.buyChannel=val;
    },
    //点击查询按三个条件查询商品信息，点击查询，默认第1页,10条，返回所有条数和合计金额
    getShoesInfoListByCriteria(){
      this.axios.post("/shoesInfo/getShoesInfoListByCriteria", {
        pageNum: this.pageNum,
        pageSize: this.selectForm.pageSize,
        productId: this.selectForm.productId,
        shoeName: this.selectForm.shoeName,
        orderStartTime: this.selectForm.orderStartTime,
        orderEndTime: this.selectForm.orderEndTime,
        buyChannel: this.selectForm.buyChannel,
      }).then(res => {
        this.shoes=res.data.data.shoesInfoDOList;
        this.allShoesNumber=res.data.data.allShoesNumber;
        this.allTotalMoney=res.data.data.allTotalMoney;
      })
    },
    //点击查询旁边的重置按钮时，清空查询参数
    resetSelectCriteria(){
      this.pageNum="1";
      this.selectForm.productId="";
      this.selectForm.shoeName="";
      this.selectForm.orderDate="";
      this.selectForm.buyChannel="";
      this.selectForm.orderStartTime="";
      this.selectForm.orderEndTime="";
    },
    //点击下载按钮，下载excel流
    exportExcelByCriteria(){
      this.axios.post("/exportShoesInfoExcel", {
        productId: this.selectForm.productId,
        shoeName: this.selectForm.shoeName,
        buyChannel: this.selectForm.buyChannel,
        orderStartTime: this.selectForm.orderStartTime,
        orderEndTime: this.selectForm.orderEndTime,
      },{responseType: "blob"}).then(res => {
        if(!res) return
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
        if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
          navigator.msSaveBlob(blob, this.filename)
        } else {
          const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
          const a = document.createElement('a') //创建a标签
          a.style.display = 'none'
          a.href = href // 指定下载链接
          a.download = this.filename //指定下载文件名
          a.click() //触发下载
          URL.revokeObjectURL(a.href) //释放URL对象
        }
      })
    },
    //点击选择pageSize时，获取pageSize
    handleSizeChange(currentPageSize){
      this.selectForm.pageSize=currentPageSize;
      this.pageNum="1";
      this.getShoesInfoListByCriteria();
    },
    //点击分页时，触发事件，获得当前页数，然后调用分页查询的方法，支持按三个条件查询
    currentChange:function (currentPage){
      this.pageNum=currentPage;
      this.getShoesInfoListByCriteria();
    },

    //上传图片的请求
    submitUpload(){
      const formData=new FormData()
      this.fileList.forEach(file=>{
        formData.append("images",file.raw)
      })
      this.axios.post("/upload/uploadPhotos",formData)
      .then(res => {
        if (res.data.code==200){
          alert(res.data.data);
        }else {
          alert(res.data.msg);
        }
      })
      this.fileList=[]
    },
    //删除和添加图片的钩子方法
    handleChange(fileList){
      this.fileList.push(fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    //点击添加订单按钮，弹出上传操作框
    goUploadImages(){
      this.uploadImageVisible= true;
    },
    //点击手工添加，弹出添加窗口
    goinsertShoesInfoByManual(){
      this.insertShoesFormVisible=true;
    },
    //点击货号管理，弹出窗口
    productIdManage(){
      this.productManageFormVisible=true;
    },
    //点击删除弹出操作框
    deleteShoesForm(row){
      this.deleteShoesFormVisible= true;
      this.id= row.id;
    },
    //点击编辑弹出操作框
    updateShoesForm(row){
      this.updateShoesFormVisible=true;
      this.id= row.id;
      this.form.productId=row.productId;
      this.form.shoeName=row.shoeName;
      this.form.shoeSize=row.shoeSize;
      this.form.shoeNumber=row.shoeNumber;
      this.form.price=row.price;
      this.form.expressMoney=row.expressMoney;
      this.form.noexpressMoney=row.noexpressMoney;
      this.form.couponMoney=row.couponMoney;
      this.form.subsidyMoney=row.subsidyMoney;
      this.form.totalMoney=row.totalMoney;
      this.form.orderDate=row.orderDate;
      this.form.buyChannel=row.buyChannel;
    },

    //点击添加信息的确定按钮，发起请求添加
    insertShoesByManual() {
      this.axios.post("/shoesInfo/insertShoesByManual",{
        productId: this.inserForm.productId,
        shoeName: this.inserForm.shoeName,
        shoeSize: this.inserForm.shoeSize,
        shoeNumber: this.inserForm.shoeNumber,
        price: this.inserForm.price,
        expressMoney: this.inserForm.expressMoney,
        noexpressMoney: this.inserForm.noexpressMoney,
        couponMoney: this.inserForm.couponMoney,
        subsidyMoney: this.inserForm.subsidyMoney,
        totalMoney: this.inserForm.totalMoney,
        orderDate: this.inserForm.orderDate,
        buyChannel: this.inserForm.buyChannel,
      }).then(res => {
        alert(res.data.msg)
      })
    },
    //手工添加信息页面，点击重置，清空填写内容
    resetForm(){
      this.inserForm={
        productId: "",
        shoeName: "",
        shoeSize: "",
        shoeNumber: "",
        price: "",
        expressMoney: "",
        noexpressMoney: "",
        couponMoney: "",
        subsidyMoney: "",
        totalMoney: "",
        orderDate: "",
        buyChannel: "",
      }
    },

    //点击编辑的确定，请求修改信息
    updateShoesById() {
      this.axios.post("/shoesInfo/updateShoesById",{
        id: this.id,
        productId: this.form.productId,
        shoeName: this.form.shoeName,
        shoeSize: this.form.shoeSize,
        shoeNumber: this.form.shoeNumber,
        price: this.form.price,
        expressMoney: this.form.expressMoney,
        noexpressMoney: this.form.noexpressMoney,
        couponMoney: this.form.couponMoney,
        subsidyMoney: this.form.subsidyMoney,
        totalMoney: this.form.totalMoney,
        orderDate: this.form.orderDate,
        buyChannel: this.form.buyChannel,
      }).then(res => {
        alert(res.data.msg)
      })
    },
    //点击确定删除订单信息
    deleteShoesById(){
      this.axios.post("/shoesInfo/deleteShoesById",{
        id: this.id,
      }).then(res => {
        alert(res.data.msg)
        this.deleteShoesFormVisible= false;
      })
    },
  }
}
</script>

<style scoped>
.tableBox{
  padding:0;
  margin:0;
  text-align: left;
  list-style-type: none;}



</style>

